<template>
    <div>
        <div ref="main" style="width: 600px; height: 400px"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            orderlist: []
        };
    },
    methods: {},
    async mounted() {
        let res = await this.$http.get('/orderlist');
        // console.log(res.data.data);
        let category = new Set();
        for (const it of res.data.data) {
            category.add(it.category);
        }

        // console.log(category);
        category = [...category];
        // console.log(category);
        // for (let [i, j] of category.entries()) {
        //     this.orderlist.push({ value: 0, name: i });
        // }
        // for (const it of res.data.data) {
        //     for (let [i, j] of this.orderlist.entries()) {
        //         if (j.name == it.category) {
        //             j.value = j.value + it.shuliang;
        //         }
        //     }
        // }
        let xx = {};

        for (const it of res.data.data) {
            xx[it.category] = xx[it.category] ? xx[it.category] : {};
            xx[it.category]['value'] = xx[it.category]['value'] ? xx[it.category]['value'] : 0;
            xx[it.category]['value'] += it.shuliang;
            xx[it.category]['name'] = it.category;
        }

        this.orderlist = Object.values(xx);

        var myChart = echarts.init(this.$refs.main);
        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: this.orderlist
                }
            ]
        };
        myChart.setOption(option);
    }
};
</script>

<style lang="scss" scoped>
</style>